import React, { useState } from "react";
// import { Tabs, Form, Input, Button } from 'element-react';
import "./login.sass"
import { useDispatch, useSelector } from "dva";
import API from "./../../api";
import { Button, Checkbox, Form, Input, Tabs } from 'antd';

const { TabPane } = Tabs;
const roles = [
  {
    name: "一般管理员",
    role: "inspec",
  },
  {
    name: "高级管理员",
    role: "familyPartyRecord",
  },
]


const Login = () => {
  const [form, setForm] = useState({ age: "", pass: "" })

  /**
   * 作用:共享状态,返回Redux的store中对dispatch的引用,可执行redux中的方法
   * const dispatch = useDispatch();
   */
  const dispatch = useDispatch();

  /**
   * 作用：共享状态,从Redux的store中提取数据（state）
   * const num=useSelector(state=>state.num)
   */
  const globalState = useSelector(({ global }) => global);

  const [activeKey, setActiveKey] = useState('inspec')

  const fnTabChange = (activeKey) => {
    // setActiveKey(activeKey)
    console.log(activeKey);
  }

  const fnLogin = async (values) => {
    const data = await API.login({
      ...values,
      role: activeKey,
      captchaId: '',
      verifyCode: ''
    })
    dispatch({
      type: 'global/setUserInfo',
      payload: data
    })
    console.log(data);

  }
  const handleSubmit = (e) => {
    e.preventDefault();

    // this.refs.form.validate((valid) => {
    //   if (valid) {
    //     alert('submit!');
    //   } else {
    //     console.log('error submit!!');
    //     return false;
    //   }
    // });
  }

  const onChange = (key, value) => {
    // console.log(value);
    setForm(Object.assign({}, form, { [key]: value }))
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }

  return (
    <div className="bg-color-dark bg">

      <div className="panel">

        <div className="panel-center">
          <h2>孚达</h2>
          <Tabs defaultActiveKey="1" onChange={fnTabChange}>
            {roles.map((item, index) => {
              return (
                < Tabs.TabPane tab={item.name} key={item.role}></Tabs.TabPane>
              )
            })}
          </Tabs>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={fnLogin}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
              {/* <Input value={form.age} onChange={(value) => onChange("age", value)} /> */}
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              {/* <Input.Password value={form.pass} onChange={(value) => onChange("pass", value)} /> */}
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>

        </div>

      </div>

    </div >
  )



}

export default Login